<!DOCTYPE html>
<html>
<head>
    <title>mitmproxy生成测试用例</title>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        form {
            width: 900px;
            margin: 0 auto;
            margin-left: 130px;
        }
        input {
            width: 70%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            margin-left: 30px;
        }
        button {
            padding: 10px;
            border: none;
            border-radius: 4px;
            background-color: #007BFF;
            color: #fff;
            cursor: pointer;
            margin-left: 30px;
        }
        .download-button {
            background-color: #007BFF;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 13px;
            margin: 4px 2px;
            cursor: pointer;
            width: 130px;
            margin-left: 30px;
            margin-right: 30px;
          }
        .alert {
            position: fixed;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .alert-content {
            margin-bottom: 10px;
        }

        .alert-button {
            background-color: black;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 10px 10px;
            cursor: pointer;
        }
        .downloads {
            width: 900px;
            margin: 0 auto;

        }



    </style>
</head>
<body>

<table>
    <tr>
        <td>
            <b>证书下载：
                <button class="download-button" onclick="downloadFile()">mitmproxy证书</button>
                <span style="color:red">注意：安装证书完成后需要重启浏览器</span>
            </b>
        </td>
        <td>
            <form id="myForm">
                <p>
                    <b>产品地址：</b><input type="text" id="kw" name="查询参数" placeholder="请输入产品地址" required>
                    <button type="button" onclick="showAlert()">开始</button>
                </p>
            </form>
        </td>
    </tr>
</table>
<div class="alert" id="alertBox" style="display: none;">
    <div class="alert-content" id="alertContent"></div>
    <button class="alert-button" onclick="hideAlert()">关闭</button>
</div>
<script>
    document.getElementById("kw").addEventListener("keypress", function(event) {
        if (event.keyCode === 13) {
            // 回车键被按下
            event.preventDefault();
            showAlert()
            // 在这里添加您想要执行的逻辑
        }
    });
    function addOrRefreshIframe(url) {
        var iframeExists = document.querySelector('iframe') !== null; // 检查是否存在 iframe

        if (!iframeExists) {
            var iframe = document.createElement('iframe'); // 创建 iframe 元素
            iframe.src = url; // 设置 iframe 的 src 属性
            iframe.width="100%"
            iframe.height="800"
            document.body.appendChild(iframe); // 将 iframe 添加到页面的 body 中
        } else {
            var iframe = document.querySelector('iframe'); // 获取已存在的 iframe 元素
            iframe.src = url; // 刷新 iframe
        }
    }
    function downloadFile() {
        var platform = navigator.platform;
        console.log("Operating System:", platform);
        file_data={
        "Win32":"mitmproxy-ca-cert.p12",
        "Win64":"mitmproxy-ca-cert.p12",
        "MacIntel":"mitmproxy-ca-cert.pem",
        "Linux x86_64":"mitmproxy-ca-cert.pem",
        "Linux i686":"mitmproxy-ca-cert.pem",
        "iPhone":"mitmproxy-ca-cert.pem",
        "iPad":"mitmproxy-ca-cert.pem",
        "Android":"mitmproxy-ca-cert.cer",
        "Linux armv7l":"mitmproxy-ca-cert.pem",
        "Linux armv8l":"mitmproxy-ca-cert.pem",
        "CrOS":"mitmproxy-ca-cert.pem",
        "PlayStation 4":"mitmproxy-ca-cert.pem"
        };

        console.log("操作平台:", file_data["Win32"]);
        console.log("操作平台:", file_data["Linux x86_64"]);
        var downloadUrl;
        if (file_data.hasOwnProperty(platform)) {
            downloadUrl = 'http://192.168.114.37:7777/download/' + file_data[platform];
        } else {
            downloadUrl = 'http://192.168.114.37:7777/download/' + file_data["Win32"];
        }
        var link = document.createElement('a');
        link.href = downloadUrl;
        link.download = file_data[platform];
        link.click();
    }

    function generateUUID() {
        var uuid = localStorage.getItem('uuid');
        if (uuid) {
            return uuid;
        }
        uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = Math.random() * 16 | 0,
                v = c === 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
        localStorage.setItem('uuid', uuid);
        return uuid;
    }
    var global_url=""
    function showAlert() {
        var search_kw = document.getElementById("kw");
        console.log("查询参数"+search_kw.value)
        if (search_kw.value.trim() === "") {
            var alertBox = document.getElementById("alertBox");
            var alertContent = document.getElementById("alertContent");

            alertContent.innerHTML = "<h3>错误提示</h3>查询条件不能为空";
            alertBox.style.display = "block";
            return;
        }
         try {
            new URL(search_kw.value.trim());
            fetch('http://192.168.114.37:7777/get_content', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ search_kw: search_kw.value.trim() ,user_uuid: generateUUID()}),
        })
        .then(response => response.json())
        .then(data => {

            if(data.web_url){
                addOrRefreshIframe(data.web_url);
                global_url=data.web_url;
            }
            else{
            var alertBox = document.getElementById("alertBox");
            var alertContent = document.getElementById("alertContent");
            alertContent.innerHTML = data.content;
            alertBox.style.display = "block";
            console.log("data.content:", data);
            console.log("data.content:", data.content);
            console.log("data.web_url:", data.web_url);
            }

        });
          } catch (error) {
            var alertBox = document.getElementById("alertBox");
            var alertContent = document.getElementById("alertContent");

            alertContent.innerHTML = "<h3>错误提示3</h4>URL不正确";
            alertBox.style.display = "block";
            return;
          }

    }

    function hideAlert() {
        var alertBox = document.getElementById("alertBox");
        alertBox.style.display = "none";
        if (global_url){
            addOrRefreshIframe(global_url);
        }

    }
    var intervalId;
    function callBackendAPI() {
      fetch('http://192.168.114.37:7777/check')
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          return response.json();
        })
        .then(data => {
          // 处理从后端接收到的数据
          console.log(data);

        })
        .catch(error => {
          console.error('There was a problem with the fetch operation:', error);
        });
    }

    // 每隔2分钟调用一次后端接口
<!--    intervalId=setInterval(callBackendAPI, 5*60 * 1000);-->
<!--        // 在页面卸载（unload）时清除定时器-->
<!--    window.addEventListener('beforeunload', () => {-->
<!--      clearInterval(intervalId);-->
<!--    });-->
</script>
</body>
</html>
